<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>底部导航</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css"/>
    <link rel="stylesheet" type="text/css" href="./css/style.css"/>
    <link rel="stylesheet" type="text/css" href="./css/yzl.css">

    <style>
        .header {
            display: none;
        }
        .active {
            display: block;
            border: none;
        }
        .index_title{
          color: #999999;
        }
        .index_active{
          color: #333;
          border-bottom: 3px solid #F95656;
        }
        .user-header-icon {
          width: 20px;
          margin: 11px;
        }
        .nav-item-active{
          color: #333;
          border-bottom: 3px solid #F85625;
        }
    </style>

</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical" v-cloak>
  <div id="headers">
    <div class="header active">
      <span class="header_dian_left" onclick="openMessage()">
          <img  class="user-header-icon" style="float:left;width: 24px;"
               v-src="'image/xinxi.png'" tapmode>
          <span class="header_dian_title" v-show="sys_flag == 1"></span>
      </span>
      <span class="title index_title" :class="{'index_active':index_state==1}"  style="line-height:40px;margin:0px 6px;" v-myclick="[1,change_state]">推荐</span>
      <span class="title index_title" :class="{'index_active':index_state==2}" style="line-height:40px;margin:0px 6px;" v-myclick="[2,change_state]">关注</span>
      <img onclick="openrank()" class="user-header-icon" style="float:right;width: 24px;"
          v-src="'image/huizhang.png'" tapmode>
    </div>
    <div  class="header">
    <!-- <span class="title" style="color:black">商城</span> -->
    <span class="title index_title" :class="{'nav-item-active':platindex==0}"  style="line-height:40px;margin:0px 8px;" v-myclick="[0,change_platform]">京东</span>
    <span class="title index_title" :class="{'nav-item-active':platindex==1}" style="line-height:40px;margin:0px 8px;" v-myclick="[1,change_platform]">淘宝</span>
    <span class="title index_title" :class="{'nav-item-active':platindex==2}" style="line-height:40px;margin:0px 8px;" v-myclick="[2,change_platform]">拼多多</span>

    </div>
    <div class="header" style="background-color:#2E353D;color:#ffffff">
        <span class="title" >QHR交易</span>
    </div>
    <div class="header" >
        <span class="title" style="color:black">今日任务状态</span>
    </div>
    <div class="header" >
        <!--<img onclick="openMessage()" class="user-header-icon" style="float:left"-->
             <!--v-src="'image/xinxi.png'" tapmode>-->
        <span onclick="openMessage()" tapmode class="header_dian_left">
          <img class="user-header-icon" style="float:left;width: 24px;"
               v-src="'image/xinxi.png'" tapmode>
          <span class="header_dian_title" v-show="sys_flag == 1"></span>
        </span>
        <span class="title" style="margin-left:46px;color: white">我的</span>
        <img onclick="openSetting()"  class="user-header-icon" style="float:right;width: 24px;"
            v-src="'image/1-sehhzi.png'" tapmode>
        <span style="position:absolute;font-size:12px;right:25px;top:20px;color:white;background:red;line-height:normal;padding:0 5px;border-radius:7px;z-index: 10"
              v-if="unReadMsgCount>0">{{unReadMsgCount}}</span>
    </div>
</div>
    <div id="main" class="flex-con">

    </div>
    <div id="footer" class="footer border-t" >
        <ul class="flex-wrap">

            <li  tapmode="hover" onclick="randomSwitchBtn( 0 );" class="flex-con active" :class="BSImg">动态</li>
            <li tapmode="hover" onclick="randomSwitchBtn( 1 );" class="flex-con" :class="BSImg">商城</li>
            <li tapmode="hover" onclick="randomSwitchBtn( 2 );" class="flex-con" :class="BSImg">交易</li>
            <li tapmode="hover" onclick="randomSwitchBtn( 3 );" class="flex-con" :class="BSImg">任务</li>
            <li tapmode="hover" onclick="randomSwitchBtn( 4 );" class="flex-con" :class="BSImg">我的</li>
        </ul>
    </div>
    <div class="modal-index-filter" style="top:0px; " :class="selectModal"  v-cloak>
</div>
</div>
</body>
</html>
<script src="script/api.js"></script>
<script src="script/vue.js"></script>
<script src="script/app.js"></script>
<script src="script/common.js"></script>
<script src="script/url.js"></script>
<script>
    var vm;
    var analyzeIndex;
    var pageName;
    var isOpen = false;
    var frameNames = ['动态', '商城', '交易','任务','我的'];
    var switch_index = 2;
    var sys_flag,
    apiready = function () {
      // reqPermission(['storage','camera','location','microphone']);
        setBSImg();
        MNActionButton = api.require('PIActionButton');
        FNScanner  = api.require('FNScanner');
        wx = api.require('wx');
        qq = api.require('QQPlus');
        initApp();
        if (api.pageParam && api.pageParam.to) {
            funIniGroup(api.pageParam.to);
        } else {
            funIniGroup(0);
        }
        $api.fixTabBar($api.byId('footer'));
        addListeners();
        doubleBack();
        // api.parseTapmode();
    };

    function initApp() {
        vm = new Vue({
            el: '#wrap',
            data: {
                BSImg: Vue.BSImg,
                showModal: false,
                unReadMsgCount: 0,
                index_state:1,
                platindex:1,
                sys_flag:sys_flag,
                member_id:getPrefs('member_id'),
            },
            mounted:function(){
              if(getPrefs('member_id') != ''){
                this.again();
              };
            },
            watch: {
            },
            methods: {
              again:function(){
                var data={
                    member_id:getPrefs('member_id'),
                };
                var callback =function (ret) {
                    vm.sys_flag = ret.content.sys_flag;
                }
                pinet.post(APIURL+'/app/Notices/noticeFlag', data, callback);
              },
              change_state:function (state) {
                if(vm.index_state!=state){
                  api.sendEvent({
                      name: 'homepage',
                      extra: {
                          state: state,
                      }
                  });

                }
                vm.index_state = state;
              },
              change_platform:function(index){
                showProgress();
                vm.platindex = index;
                this.shop_type_id = index+2;
                api.sendEvent({
                    name: 'change_platform',
                    extra: {
                        index: index,
                    }
                });

              },
          },
          computed: {
              selectModal: function () {
                  return {
                      show: this.showModal,
                      hide: !this.showModal
                  }
              },
          },
        });
    }

    function openrank() {
      api.openWin({
          name: 'fanslist',
          url: 'html/rankinglist/fanslist.html',
      });

    }

    function openMessage(){
        if(!hasPrefs('token')){
            api.openWin({
                name: 'login',
                url: 'html/login/login.html',
            });
            return;
        }
        api.openWin({
            name: 'notice',
            url: 'html/notice/notice.html',
        });

    }

    function openSetting(){
      api.openWin({
          name: 'setup',
          url: 'html/user/setup.html',
      });
    }


    function funIniGroup(index) {
        var frames = [];
        frames.push({
            name: 'homepage',
            url: './html/home/homepage.html',
            bgColor: '#f7f4f2',
            bounces: true
        }, {
            name: 'shop',
            url: './html/shop/shop.html',
            bgColor: '#f7f4f2',
            bounces: true
        }, {
            name: 'game',
            url: './html/transaction/QHRpage.html',
            bgColor: '#f7f4f2',
            bounces: false
        },{
            name: 'task',
            url: './html/home/task.html',
            bgColor: '#f7f4f2',
            bounces: false
        },{
            name: 'user',
            url: './html/user/user.html',
            bgColor: '#f7f4f2',
            bounces: true
        }
      );
        switchActiveCls(index);
        api.openFrameGroup({
            name: 'group',
            scrollEnabled: false,
            preload:0,
            rect: {
              x: 0,
              y: 60,
              w: api.winWidth,
              h: $api.dom('#main').offsetHeight-110
            },
            index: index,
            frames: frames
        }, function (ret) {
            indexOnPageStart();
            if (ret){
              // 切换frame的发事件通知相应的frame
              console.log(ret.index);
              api.sendEvent({
                  name: 'switch_to_frame_' + ret.index,
                  extra: {
                      id: ret.index,
                  }
              });

              if (ret.index == 2){
              api.setStatusBarStyle({style: 'light', color: ''});
            }else{
              api.setStatusBarStyle({style: 'dark', color: ''});

            };

            }
        });
    }


    // 随意切换按钮
    function randomSwitchBtn(index) {
      api.sendEvent({
        name : 'close_add',
      });
      switch_index = index;


        var eFootLis = $api.domAll('#footer li'),
            eHeaderLis = $api.domAll('#headers .header'),
            tag = eFootLis[index];
        if (tag == $api.dom('#footer li.active'))return;
        for (var i = 0, l = eFootLis.length; i < l; i++) {
            if (i == index) {
                $api.addCls(eFootLis[i], 'active');
                $api.addCls(eHeaderLis[i], 'active');
            } else {
                $api.removeCls(eFootLis[i], 'active');
                $api.removeCls(eHeaderLis[i], 'active');
            }

        }
        api.setFrameGroupIndex({
            name: 'group',
            index: index,
            // reload:true
        });
    }

    function switchActiveCls(index) {
        var eFootLis = $api.domAll('#footer li'),
            eHeaderLis = $api.domAll('#headers .header'),
            tag = eFootLis[index];
        // if (tag == $api.dom('#footer li.active'))return;
        for (var i = 0, l = eFootLis.length; i < l; i++) {
            if (i == index) {
                $api.addCls(eFootLis[i], 'active');
                $api.addCls(eHeaderLis[i], 'active');
            } else {
                $api.removeCls(eFootLis[i], 'active');
                $api.removeCls(eHeaderLis[i], 'active');
            }
        }
        api.setFrameGroupIndex({
            name: 'group',
            index: index,
        });
    }

    function isWhichFrame() {
        var eFootLis = $api.domAll('#footer li');
        for (var i = 0, l = eFootLis.length; i < l; i++) {
            if ($api.hasCls(eFootLis[i], 'active')) {
                return i;
            }
        }
    }

    function indexOnPageStart() {
        var frameIndex = isWhichFrame();
        if (analyzeIndex >= 0) {
            if (analyzeIndex == frameIndex) {
                return;
            } else {
                indexOnPageEnd();
            }
        }
        analyzeIndex = frameIndex;
        pageName = frameNames[frameIndex];
        // onPageStart(pageName);
    }

    function indexOnPageEnd() {
        if (analyzeIndex >= 0) {
            onPageEnd(pageName);
            analyzeIndex = -1;
        }
    }

    function addListeners() {
        api.addEventListener({
            name: 'getUnReadMsgCount'
        }, function (ret) {
            vm.unReadMsgCount = ret.value.count;
            api.setAppIconBadge({
                badge: ret.value.count
            });
        });


        api.addEventListener({
            name: 'viewappear'
        }, function () {
            indexOnPageStart();
            if (isOpen) {
                isOpen = false;
                var params = api.pageParam;
                if (params) {
                    if (params.startImg) {
                        openWin('html/home/browser', {url: params.startImg.url});
                    } else if (params.goods_id) {
                        openWin('html/home/browser', {goods_id: params.goods_id});
                    }
                }
            }
            if(getPrefs('member_id') != ''){
                vm.again();
            }
        });
        api.addEventListener({
            name: 'pageindex'
        }, function (ret) {
           vm.pageindex=ret.value.status;
        });

        api.addEventListener({
            name: 'cancelModal'
        }, function () {
            vm.showModal = false;
        });

        api.addEventListener({
            name: 'showModal'
        }, function () {
          if(switch_index==2){
            vm.showModal = !vm.showModal;

          }
        });
        api.addEventListener({
            name: 'viewdisappear'
        }, function () {
            indexOnPageEnd();
        });
    }



</script>
